<template>
  <div class="container">
    <el-card>
      <!-- 按钮 -->
      <div class="btn_right">
        <el-button type="success" icon="el-icon-edit" class="right" @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- 筛选 -->
      <el-form label-width="80px">
        <!-- 第一行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="getDirectoryListByID"
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.subjectID"
              >
                <el-option
                  v-for="item in SubjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.catalogID"
              >
                <el-option
                  v-for="item in DirectoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.tags"
              >
                <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="QuestionsData.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.questionType"
              >
                <el-option label="单选" :value="1"></el-option>
                <el-option label="多选" :value="2"></el-option>
                <el-option label="简答" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.difficulty"
              >
                <el-option label="简单" :value="1"></el-option>
                <el-option label="一般" :value="2"></el-option>
                <el-option label="困难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                placeholder="请选择"
                style="width: 100%"
                v-model="QuestionsData.creatorID"
              >
                <el-option
                  v-for="item in creatorList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="QuestionsData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="QuestionsData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-col :span="12">
                <el-select
                  placeholder="请选择"
                  style="width: 95%"
                  v-model="QuestionsData.province"
                  @change="getAreasList"
                >
                  <el-option
                    v-for="item in citiesList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select
                  placeholder="请选择"
                  style="width: 95%"
                  v-model="QuestionsData.city"
                >
                  <el-option
                    v-for="item in areasList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="getQuestionsList"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 提示 -->
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="QuestionsList">
        <el-table-column prop="number" label="试题编号"></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column label="题型">
          <template #default="{ row }">
            {{
              questionTypeList.find((item) => item.value === +row.questionType)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template #default="{ row }">
            {{ row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template #default="{ row }">
            {{
              difficultyList.find((item) => item.value === +row.difficulty)
                .label
            }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column label="操作">
          <template #default='{row}'>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              plain
              circle
              @click="viewDialog(row)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              plain
              circle
              @click="$router.push(`new?id=${row.id}`)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="handleDelete(row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-check"
              plain
              circle
              @click="handleCheck(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pag"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="+page"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <QuestionsPreviews :isShow.sync='isShow' :question='question'/>
>>>>>>> feature/questions
  </div>
</template>

<script>
import { simple as simpleSubjectList } from '@/api/hmmm/subjects.js'
import { simple as simpleDirectoryList } from '@/api/hmmm/directorys.js'
import { simple as simpleTagsList } from '@/api/hmmm/tags.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { list as usersList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as questionsList, remove as questionDelete, choiceAdd } from '@/api/hmmm/questions.js'
import QuestionsPreviews from '@/module-hmmm/components/questions-previews'
export default {
  components: { QuestionsPreviews },
  data () {
    return {
      QuestionsData: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      // 学科列表
      SubjectList: [],
      // 根据学科获取二级目录列表
      DirectoryList: [],
      // 根据学科获取标签列表
      tagsList: [],
      // 方向
      direction: direction,
      // 录入人列表
      creatorList: [],
      // 城市列表
      citiesList: provinces(),
      // 城市下地区列表
      areasList: [],
      // 题型列表
      questionTypeList: questionType,
      // 难度列表
      difficultyList: difficulty,
      // 基础题库列表
      QuestionsList: [],
      // 数据总条数
      counts: 0,
      // 当前页码
      page: 1,
      // 总页数
      pages: 0,
      // 当前页条数
      pageSize: 5,
      isShow: false,
      // 当前题目信息
      question: {}
    }
  },
  created () {
    this.getSubjectList()
    this.getCreatorList()
    this.getQuestionsList()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const { data } = await simpleSubjectList()
      console.log(data, '获取学科列表')
      this.SubjectList = data
    },
    async getDirectoryListByID (subjectID) {
      // 根据学科获取二级目录列表
      const { data: data1 } = await simpleDirectoryList({ subjectID })
      console.log(data1, '根据学科获取二级目录列表')
      this.DirectoryList = data1
      // 根据学科获取标签列表
      const { data: data2 } = await simpleTagsList({ subjectID })
      console.log(data2, '根据学科获取标签列表')
      this.tagsList = data2
    },
    // 获取录入人列表
    async getCreatorList () {
      const {
        data: { list }
      } = await usersList()
      console.log(list, '获取录入人列表')
      this.creatorList = list
    },
    // 获取城市下地区列表
    async getAreasList (pname) {
      const res = await citys(pname)
      console.log(res, '获取城市下地区列表')
      this.areasList = res
    },
    // 清空
    clear () {
      this.QuestionsData = {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
      this.DirectoryList = []
      this.tagsList = []
    },
    // 获取基础题库数据
    async getQuestionsList () {
      const { data } = await questionsList(this.QuestionsData)
      console.log(data, '获取基础题库数据')
      this.QuestionsList = data.items
      this.counts = data.counts
      this.page = data.page
      this.pages = data.pages
      this.pagesize = data.pagesize
    },
    // 换页
    handleCurrentChange (val) {
      this.QuestionsData.page = val
      // console.log(this.QuestionsData)
      this.getQuestionsList()
    },
    // 换条数
    handleSizeChange (val) {
      this.QuestionsData.pagesize = val
      // this.QuestionsData.page = 1
      this.getQuestionsList()
    },
    // 打开对话框
    viewDialog (data) {
      this.isShow = true
      // console.log(data)
      this.question = data
    },
    // 删除
    handleDelete (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题目，是否继续', '提示', {
        type: 'warning'
      }).then(async () => {
        await questionDelete({ id: id })
        // console.log(res)
        this.$message.success('删除成功')
        this.getQuestionsList()
      }).catch(() => [
        this.$message.info('取消删除')
      ])
    },
    // 加入精选
    handleCheck (id) {
      console.log(id)
      this.$confirm('此操作将该题目加入精选，是否继续', '提示', {
        type: 'info'
      }).then(async () => {
        await questionDelete({ id: id })
        // console.log(res)
        const res = await choiceAdd({ id: id, publishState: 1 })
        console.log(res)
        this.$message.success('加入精选题库成功')
        this.getQuestionsList()
      }).catch(() => [
        this.$message.info('取消加入')
      ])
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_right {
  text-align: right;
  margin-bottom: 12px;
}
.pag {
  text-align: right;
  margin-top: 15px;
}
</style>
